<!-- 菜单页面 -->

<template>
    <div class="common-layout">
        <el-container class="container">
            <el-aside class="aside">
                <LeftMenu :isCollapse="isCollapse"></LeftMenu>
            </el-aside>
            <el-container class="c-container">
                <el-header class="header">
                    <RightTop :isCollapse="isCollapse" @operation="operation"></RightTop>
                </el-header>
                <el-main class="main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import LeftMenu from './components/LeftMenu.vue';
import RightTop from './components/RightTop.vue';

// 控制左边导航栏
let isCollapse = ref(false);
const operation = () => {
    isCollapse.value = !isCollapse.value;
};
</script>

<style lang="scss" scoped>
@import '@/styles/home.scss';
</style>
